<template>
    <section class="real-app">
        <input
            type="text"
            class="add-input"
            autofocus="autofocus"
            placeholder="接下去要做什么？"
            @keyup.enter="addTodo"
        >

        <!-- 组件：列表数据 -->
        <!-- @del监听子组件传递过来请求 -->
        <item
            v-for="todo in filteredTodos"
            :key="todo.id"
            :todo="todo"
            @del="deleteTodo"
        ></item>

        <!-- 组件：按钮 -->
        <!-- @toggle子组件传递过来的 -->
        <tabs
            :filter="filter"
            :todos="todos"
            @toggle="toggleFilter"
            @clearAllCompleted="clearAllCompleted"
        ></tabs>
    </section>
</template>
<script>
// 组件：列表数据
import Item from './item.vue'
// 组件：按钮
import Tabs from './tabs.vue'
let id = 0
export default {
    data () {
        return {
            // 列表数据
            todos: [],
            // 过滤条件（all指所有）
            filter: 'all'
        }
    },
    components: {
        Item,
        Tabs
    },
    computed: {
        /**
         * 过滤的todo
         */
        filteredTodos () {
            if (this.filter === 'all') {
                return this.todos
            }
            // true false
            const completed = this.filter === 'completed'
            return this.todos.filter(todo => completed === todo.completed)
        }
    },
    methods: {
        /**
         * 添加数据
         * @param e
         */
        addTodo (e) {
            // unshift创建一个数组，并把一个元素添加到数组的开头
            this.todos.unshift({
                id: id++,
                content: e.target.value.trim(),
                completed: false
            })
            // 清空
            e.target.value = ''
        },
        /**
         * 子组件促发删除的事件
         * @param id 要删除的id
         */
        deleteTodo (id) {
            this.todos.splice(this.todos.findIndex(todo => todo.id === id), 1)
        },
        /**
         * 子组件促发修改按钮的事件
         * @param state
         */
        toggleFilter (state) {
            this.filter = state
        },
        /**
         * 子组件促发清空按钮的事件
         */
        clearAllCompleted () {
            this.todos = this.todos.filter(todo => !todo.completed)
        }
    }
}
</script>
<style lang="stylus" scoped type="text/stylus">
    .real-app {
        width 600px
        margin 0 auto
        box-shadow 0 0 5px #666
    }
    .add-input {
        position: relative;
        margin: 0;
        width: 100%;
        font-size: 24px;
        font-family: inherit;
        font-weight: inherit;
        line-height: 1.4em;
        border: 0;
        outline: none;
        color: inherit;
        box-sizing: border-box;
        font-smoothing: antialiased;
        padding: 16px 16px 16px 36px;
        border: none;
        box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
    }
</style>